<template>
  <div class="botInfo">
    <div class="banner">
      <client-carousel arrows="never" :url="banner" />
    </div>
    <div class="main">
      <div class="min-container">
        <client-title title="中酒云云网云管理服务" class="content-title" />
        <div>为企业级用户提供与基础设施和平台运维相关的托管服务和专业服务</div>
        <div class="learnMore">
          <span @click="handleCall">联系我们</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import ClientTitle from '@/components/client-title/client-title.vue'
import { getAssetURL } from '@/utils/load_assets'
import { useRouter } from "vue-router";
const router = useRouter();
const bannerUrl = getAssetURL('client/solution/image58.png')
const banner = ref<any>([{ url: bannerUrl }])

// 联系我们
const handleCall = () => {
  router.push("/client/others/aboutUs");
}
</script>
<style lang="less" scoped>
.botInfo {
  position: relative;
  margin-bottom: 0;
  background: #2066f4;
  .main {
    position: absolute;
    top: 0;
    width: 100%;
    .content-title {
      text-align: left;
      margin: 40px 0;
      color: #313131;
    }
    .min-container {
      margin-top: 70px;
      color: #313131;
      .learnMore {
        margin-top: 60px;
        color: #fff;
        span {
          padding: 10px 60px;
          transition: all 0.3s;
          background-color: #4098ff;
          &:hover {
            cursor: pointer;
            background-color: #66cafe;
            color: #ffffff;
          }
          &:active {
            background-color: #57b3e4;
          }
        }
      }
    }
  }
}
</style>
